<template>
  <div>
    <el-drawer :visible.sync="problemDraw" :title="title">
      <div class="pic">
        <p>问题名称 <span style="color: #ce0e0f">*</span></p>
        <el-input size="small" placeholder="请输入问题名称" v-model="data.problemName"></el-input>
      </div>
      <div class="info" style="display: flex;justify-content: space-between">
        <div class="pic">
          <p>分值 <span style="color: #ce0e0f">*</span></p>
          <el-input size="small" placeholder="请输入分值" style="width: 250px;" v-model="data.problemScore"></el-input>
        </div>
        <div class="pic">
          <p>问题类型 </p>
          <el-select size="small" placeholder="请选择问题类型" style="width: 250px;"
                     v-model="data.problemType">
            <el-option value="1" label="一般问题"></el-option>
            <el-option value="2" label="重要问题"></el-option>
            <el-option value="3" label="红线问题"></el-option>
          </el-select>
        </div>
      </div>
      <div class="info" style="display: flex;justify-content: space-between">
        <div class="pic">
          <p>整改是否传图 <span style="color: #ce0e0f">*</span></p>
          <el-select v-model="proType" size="small" placeholder="请选择" style="width: 250px;">
            <el-option value="1" label="必须传图"></el-option>
          </el-select>
        </div>
      </div>
      <div style="padding: 10px;position: absolute;bottom: 50px;right: 50px">
        <el-button style="background-color:#303e9d;color: #eeeeee" @click="submitProblem" v-if="!termId&&title=='添加巡查问题'">
          提 交
        </el-button>
        <el-button style="background-color:#303e9d;color: #eeeeee" @click="editProblem"
                   v-if="title=='修改巡查问题'&&!termId">修 改
        </el-button>
        <el-button style="background-color:#303e9d;color: #eeeeee" @click="addProblem" v-if="termId">完 成</el-button>
        <el-button style="background-color:#eeeeee;color: #999" @click="problemDraw=false">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "addProblem",
  data() {
    return {
      problemDraw: false,
      title: "",
      proType: "1",
      termId: "",
      data: {
        problemName: "",
        problemScore: "",
        problemType: "",
      }
    }
  },
  methods: {
    handleOpen(val) {
      this.title = '添加巡查问题'
      this.problemDraw = true
      this.termId = val
      this.data = this.$options.data().data
    },
    handleEdit(val) {
      this.title = '修改巡查问题'
      this.problemDraw = true
      val.problemType = val.problemType.toString()
      this.data = JSON.parse(JSON.stringify(val));
    },
    submitProblem() {
      const data = this.data
      if (!data.problemName) return this.$message.warning("请输入问题名称")
      if (!data.problemScore) return this.$message.warning("请输入问题分值")
      if (!data.problemType) return this.$message.warning("请选择问题类型")
      this.$emit('addStatus', data);
      this.data = this.$options.data().data
    },
    validateProblemData(data) {
      if (!data.problemName) {
        this.$message.warning("请输入问题名称");
        return false;
      }
      if (!data.problemScore) {
        this.$message.warning("请输入问题分值");
        return false;
      }
      if (!data.problemType) {
        this.$message.warning("请选择问题类型");
        return false;
      }
      return true;
    },

    submitProblemRequest(apiMethod) {
      const data = this.data;
      if (!this.validateProblemData(data)) return;

      const params = {
        ...data,
        termId: this.termId
      };

      this.$api[apiMethod](params).then(res => {
        if (res == 1) {
          this.$message.success('提交成功');
          this.$emit('addStatus', 1);
          this.problemDraw = false;
        }
      });
    },

    addProblem() {
      this.submitProblemRequest('patrolAddProblem');
    },

    editProblem() {
      this.submitProblemRequest('patrolUpdateProblemInfo');
    }
  }
}
</script>

<style scoped lang="less">
.pic {
  padding: 10px;
  box-sizing: border-box;

  p {
    margin: 5px 0;
  }
}

</style>